import React, { Component } from "react";
import "./pagination.css";
import _Http from "../../../config/api";
import {Notice} from '../../../config/omsLayer';
export default class OmsPagination extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total:this.props.pageConfig.total,
      curr:this.props.pageConfig.curr || 1,
      per:this.props.pageConfig.per || 15,
      langKey:window.localStorage.getItem('lang') || 'cn',
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  getDate(curr,per){
    var _this = this,
        url = _this.props.pageConfig.url,
        langIndex = _this.state.langKey;
       
        _Http.get(`${url}?curr=${curr}&per=${per}`)
        .then(function (res) {
          var tmpDateList = res.data.list;
          if(tmpDateList.length){
            _this.props.updateDate(res.data.list);
            _this.setState({
              total:res.data.total,
              curr:curr,
              per:per
            });
          }
        })
        .catch(function (error) {
          Notice.errorTips(error[langIndex]);
        });
  }

  handleChange(e) {
    var _this = this,
        newPer = e.target.value,
        newCurr = _this.state.curr,
        newTotalPage = Math.ceil(_this.state.total/newPer);
    if(newCurr > newTotalPage){
      newCurr = newTotalPage;
    }
    _this.getDate(newCurr,newPer);
  }

  handleClick(e) {
    var _this = this,
        newCurr = parseInt(e.target.getAttribute('data-page'),10),
        oldCurr = _this.state.curr,
        _input = e.target.previousElementSibling,
        _inputCurr = null,
        inputFlag = false,
        totalPage = Math.ceil(_this.state.total/_this.state.per);
      
    if(newCurr && newCurr !== oldCurr){/*页码点击跳转 */
      _this.getDate(newCurr,_this.state.per);
    }else if(_input && _input.value){ /*input 跳转到指定页 */
      _inputCurr = parseInt(_input.value,10);
      inputFlag = isNaN(_inputCurr) || _inputCurr > totalPage || _inputCurr < 1;
      _input.value = inputFlag ?'':_inputCurr;
     if(!inputFlag && _inputCurr !== oldCurr)
      _this.getDate(_inputCurr,_this.state.per);
    }
  }

  pageListHtml(total,curr){
    var resultpArray = [],
        tempArray = [-2,-1,0,1,2],
        tempcurr;

    resultpArray.push(<React.Fragment key={total+2}>
                        <li key={0} className={curr === 1?'disabled':''}><span data-page={curr > 1?curr-1:''}>&laquo;</span></li>
                        <li key={1} className={curr === 1?'active':''}><span data-page={1}>1</span></li>
                      </React.Fragment>
    );
    if(curr-2 > 2){
      resultpArray.push(
        <li key={total +5} className='disabled'><span>...</span></li>
      );
    }
    /*中间5个连续的页面*/
    for(var j = 0,len = tempArray.length; j < len; j++){
      tempcurr = tempArray[j] + curr;
      if(tempcurr <= 1 || tempcurr >= total){
        continue
      }
      resultpArray.push(
        <li key={tempcurr} className={tempcurr===curr?'active':''}><span data-page={tempcurr}>{tempcurr}</span></li>
      );
    }
    if(curr +2 < total){
      resultpArray.push(
        <li key={total +3} className='disabled'><span>...</span></li>
      );
    }
    resultpArray.push(<React.Fragment key={total+4}>
      <li key={total} className={curr===total?'active':''}><span data-page={total}>{total}</span></li>
      <li key={total + 1}className={curr === total?'disabled':''}><span data-page={curr < total?curr+1:''}>&raquo;</span></li>
      </React.Fragment>
    ); 
    return  resultpArray;
  }

  render() {
    var _this = this,
        state = _this.state,
        per = state.per,
        curr = state.curr,
        totalPage = Math.ceil(state.total/per);

    return (
      <div className="pageList clearfix">
        <ul className="pagination l" onClick={_this.handleClick}>
            {_this.pageListHtml(totalPage,curr)}
            <li>
              <span>
              <select defaultValue={per}  onChange={_this.handleChange}>
                <option value="15">15 条/页</option>
                <option value="25">25 条/页</option>
                <option value="35">35 条/页</option>
              </select>
              </span>
              
            </li>
        </ul>
        <div className="pageInfo r">
          总共{state.total}条记录<span style={{margin:'0px 10px'}}>共{totalPage}页</span>跳转到
          <input type="text" defaultValue={curr} style={{margin:'0px 3px', width:'30px',height:'20px'}}/>页
          <span  className="btn btn-primary btn-xs" style={{marginLeft:'5px'}} onClick={_this.handleClick}>Go</span>
        </div>
      </div>
    );
  }
}